<template>
  <div class="box">
    <div class="headMy">
      <van-nav-bar left-arrow
                   class="headI"
                   @click-left="$router.back()">
        <template #right
                  class="iconHead">
          <van-icon name="scan"
                    size="0.2rem" />
          <van-icon name="setting-o"
                    size="0.2rem"
                    @click="onClickRight" />
          <van-icon name="more-o"
                    size="0.2rem" />
        </template>
      </van-nav-bar>
      <div class="headTwo">
        <van-uploader :after-read="afterRead"
                      :max-size="1024*250"
                      @oversize="oversize">
          <van-image round
                     width="0.8rem"
                     height="0.8rem"
                     :src="avatar" />
        </van-uploader>
        <div class="userName">
          <h4>{{nickName}}</h4>
          <small>{{userName}}</small>
        </div>
        <van-button round
                    class="headBut"
                    type="warning">签到领劵</van-button>
      </div>
      <!--  -->
      <van-grid :column-num="5">
        <van-grid-item icon="cart-circle-o"
                       text="待付款"
                       @click="$router.push('/order?active=1')" />
        <van-grid-item icon="cart-circle-o"
                       text="待发货"
                       @click="$router.push('/order?active=2')" />
        <van-grid-item icon="records"
                       text="待收货"
                       @click="$router.push('/order?active=3')" />
        <van-grid-item icon="balance-pay
"
                       text="已完成"
                       @click="$router.push('/order?active=4')" />
        <van-grid-item icon="bookmark-o
"
                       text="全部"
                       @click="$router.push('/order?active=0')" />
      </van-grid>
      <van-grid :column-num="4">
        <van-grid-item icon="hot-sale
"
                       text="超级爆款"
                       @click="$router.push('/order?active=1')" />
        <van-grid-item icon="smile"
                       text="大牌奥莱"
                       @click="$router.push('/order?active=2')" />
        <van-grid-item icon="shop-collect
"
                       text="3折封顶"
                       @click="$router.push('/order?active=3')" />
        <van-grid-item icon="new-arrival
"
                       text="新品服饰"
                       @click="$router.push('/order?active=4')" />

      </van-grid>
      <!--  -->

    </div>
    <div class="contentMy">
      <van-card v-for="item in proList"
                :key="item.proId"
                :num="item.stock"
                :price="item.price"
                :desc="item.introduce"
                :title="item.proName"
                :thumb="item.mainImg"
                @click="fn(item.proId)" />

    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Icon, Image as VanImage, Uploader, Button, Grid, GridItem, Cell, CellGroup, Card, Toast } from 'vant'
import { getPro, setUserMsg, getUserMsg } from '../../api/index'

Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Uploader)
Vue.use(VanImage)
Vue.use(Button)

Vue.use(Grid)
Vue.use(GridItem)
Vue.use(CellGroup)
Vue.use(Cell)
Vue.use(Card)
Vue.use(Toast)
export default {
  data () {
    return {
      avatar: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=387639067,1599589691&fm=26&gp=0.jpg',
      birthday: '0',
      email: '',
      hobby: [],
      nickName: 'sh2009',
      sex: 1,
      tel: '17600901915',
      userName: '唯品会',
      proList: []
    }
  },
  methods: {
    afterRead (file) {
      setUserMsg({
        userId: localStorage.getItem('userId'),
        userData: {
          avatar: file.content
        }
      }).then(res => {
        console.log(res.data.data)
        this.avatar = res.data.data.avatar
        this.$router.go(0)
      })
    },

    oversize () {
      Toast('图片大小不允许超过250K')
    },
    onClickRight () {
      this.$router.push('/setUserMsg')
    },
    fn (proId) {
      this.$router.push('/detail/' + proId)
    }
  },
  mounted () {
    console.log(localStorage.getItem('userId'))
    getPro().then(res => {
      // console.log(res)
      this.proList = res.data.data
      console.log(this.proList)
    }),
      getUserMsg({
        userId: localStorage.getItem('userId')
      }).then(res => {
        console.log(res.data.data)
        this.avatar = res.data.data[0].avatar
        this.userName = res.data.data[0].userName
        this.nickName = res.data.data[0].nickName
      })
  }
}
</script>
<style >
.box {
  display: flex;
  overflow: auto;
  flex-direction: column;
  /* background: aqua; */
}
.headMy {
  height: 3.2rem;
  /* background: pink; */
  background: crimson;
}
.headI {
  background: crimson;
}
.headI::after {
  border-bottom: none;
}
.contentMy {
  flex: 1;
  overflow: auto;
  background: #eee;
}
.van-nav-bar__right i {
  margin: 0 0.1rem;
}

.headTwo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.1rem 0;
}
.userName {
  margin-left: 0.2rem;
  margin-right: 0.5rem;
}
.headBut {
  margin-left: 0.4rem;
}
.contentMy{
  padding-top:0.1rem;
}
</style>